<template>
  <div class="book">
    <el-button @click="dialogVisible = true">添加博客</el-button>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-form>
     <el-form-item label="标题">
        <el-input v-model="sizeForm.title"></el-input>
    </el-form-item>
     <el-form-item label="简介">
        <el-input v-model="sizeForm.md_text"></el-input>
    </el-form-item>
     <el-form-item label="内容">
        <el-input v-model="sizeForm.html_text" type="textarea"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="postBlog">确 定</el-button>
  </span>
</el-dialog>

    <el-table :data="blogList" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="190">
      </el-table-column>
      

      <el-table-column prop="title" label="标题" width="800"> </el-table-column>

      <el-table-column  label="操作" width="100">
        <template slot-scope="scope">
          <!-- <el-button @click="postBook" type="text" >编辑</el-button> -->
          <el-button type="text" @click="dialogVisible1 = true"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="deleteBlog(scope.row.id)"
            >删除</el-button
          >
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
            :append-to-body="true"
          >
            <!-- 修改的表单 -->
            <el-form>
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="简介">
                <el-input v-model="form.md_text"></el-input>
              </el-form-item>
              <el-form-item label="详细内容">
                <el-input v-model="form.html_text"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="putBlog(scope.row.id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  props:['markdownText'],
  data() {
    return {
      blogList: [],
      dialogVisible: false,
      dialogVisible1: false,
      // 添加的
      sizeForm: {
        title: "",
        md_text:"",
        html_text:""
      },
      // 修改的
      form:{
        title:"",
        md_text:"",
        html_text:""
      }
    };
  },
  methods: {
    // 获取所有book
    getBlogList() {
      request.get(`http://127.0.0.1:7001/api/blog`).then((res) => {
        this.blogList = res.data.data;
      });
    },
    // 添加book
    postBlog() {
      request.post(`http://127.0.0.1:7001/api/blog`,{
          title:this.sizeForm.title,
          md_text:this.sizeForm.md_text,
          html_text:this.sizeForm.html_text
      }).then((res) => {
        location.reload();
        console.log(res.data);
      });
    },
    putBlog(index){
      console.log(index);
      request.put(`http://127.0.0.1:7001/api/blog/${index}`,{
        title:this.form.title,
          md_text:this.form.md_text,
          html_text:this.form.html_text,
      }).then(res =>{
        console.log(res.data);
        location.reload("/blog")
      })
    },

  // 删除book
    deleteBlog(index) {
      request.delete(`http://127.0.0.1:7001/api/blog/${index}`).then((res) => {
        console.log(res.data);
        location.reload("/blog");
      });
    },
    // 触发添加博客点击事件
    
  },

  created() {
    this.getBlogList();
  },
};
</script>

<style scoped>
.book .pic {
  width: 50px;
  height: 50px;
}
</style>